<script setup>
import {message} from 'ant-design-vue'
import axios from 'axios'
import {getCurrentInstance} from "vue";
import MobileDetail from '~/contentScripts/views/tao/detail/components/tool/mobileDetail.vue'
import {isLogin} from '~/logic'

const emit = defineEmits(['login'])
const keywords = ref('')
const filters = ref([])
const columns = ref([
  {
    title: '商品',
    dataIndex: 'item',
  },
  {
    title: '排名',
    dataIndex: 'recommend_index',
    sorter: (a, b) => a.recommend_index - b.recommend_index,
    defaultSortOrder: 'ascend',
    width: 80,
    align: 'center',
  },
  {
    title: '指数',
    dataIndex: 'recommend_must_buy_index',
    width: 60,
    align: 'center',
    sorter: (a, b) => a.recommend_must_buy_index - b.recommend_must_buy_index,
  },
  {
    title: '一口价',
    dataIndex: 'price',
    align: 'center',
    width: 120,
    sorter: (a, b) => a.item_price_area.price - b.item_price_area.price,
  },
  // {
  //   title: '推荐理由',
  //   dataIndex: 'recommend_reason',
  //   width: 300,
  // },
  {
    title: '榜单类目',
    dataIndex: 'rank_cate',
    align: 'center',
    width: 220,
    filters: filters.value,
    onFilter: (value, record) => record.rank_cate.join('/') === value,
    // sorter: (a, b) => (a.first_rank_date) - b.first_rank_date,
  },
  {
    title: '上榜时间',
    dataIndex: 'rank_date',
    align: 'center',
    // width: 220,
    sorter: (a, b) => (a.rank_date) - b.rank_date,
  },
  // {
  //   title: '指数',
  //   dataIndex: 'recommend_must_buy_index',
  //   width: 60,
  //   sorter: (a, b) => a.recommend_must_buy_index - b.recommend_must_buy_index,
  //   align: 'center',
  // },
  // {
  //   title: '销量描述',
  //   dataIndex: 'recommend_item_rank_des',
  //   width: 200,
  // },
  {
    title: '查看',
    dataIndex: 'action',
    width: 100,
    align: 'center',
  },
])
const loading = ref(false)
const dataSource = ref([])
const loadData = () => {
  loading.value = true
  axios.get('/Hot/TmSearch', {
    params: {
      keywords: keywords.value,
    },
  }).then((res) => {
    loading.value = false
    filters.value = []
    for (let i = 0; i < res.data.data.length; i++) {
      const item = res.data.data[i]
      if (filters.value.findIndex(v => v.value === item.rank_cate.join('/')) !== -1) {
        continue
      }

      filters.value.push({
        text: item.rank_cate.join('/'),
        value: item.rank_cate.join('/'),
      })
    }
    columns.value[4].filters = filters.value
    dataSource.value = res.data.data
  }).catch(() => {
    loading.value = false
  })
}
const __option = getCurrentInstance()?.appContext.provides.option;
const search = () => {
  if (isLogin({
    emit,
  }, __option)) {
    if (!keywords.value) {
      return message.error('请输入商品链接或商品ID')
    }

    loadData()
  }
}
</script>

<template>
  <a-row type="flex" style="padding-bottom: 10px;">
    <a-col flex="1">
      <a-input-search
          v-model:value="keywords" style="width: 320px;" placeholder="请输入商品链接或商品ID"
          @search="search"
      />
    </a-col>
    <a-col/>
  </a-row>
  <a-table
      :columns="columns"
      :scroll="{
      y: 500,
    }" :data-source="dataSource"
      size="small"
      :loading="loading"
      :pagination="false"
  >
    <template #bodyCell="{ column, record }">
      <template v-if="column.dataIndex === 'item'">
        <div>
          <a-row type="flex" style="max-width: 560px;">
            <a-col style="padding-right: 10px">
              <a-image :src="record.item_img" style="width: 30px; height: 30px;"/>
            </a-col>
            <a-col flex="1" style="overflow: hidden;">
              <a-button
                  style="width: 100%;text-overflow:ellipsis;text-align: left;" type="link" size="small"
                  :href="`${record.item_url}`" target="_blank"
              >
                {{ record.item_name }}
              </a-button>
            </a-col>
          </a-row>
        </div>
      </template>
      <template v-else-if="column.dataIndex === 'price'">
        ¥{{ record.item_price_area.price }}
      </template>
      <template v-else-if="column.dataIndex === 'rank_cate'">
        <div style="max-width: 300px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
          {{ record.rank_cate.join('/') }}
        </div>
      </template>
      <template v-else-if="column.dataIndex === 'action'">
        <a-row type="flex">
          <a-col flex="1" style="text-align: center">
            <MobileDetail :link="record.item_url" title="手淘详情">
              <a-button type="link" size="small">
                手淘
              </a-button>
            </MobileDetail>
          </a-col>
          <a-col flex="1" style="text-align: center">
            <a-button
                type="link" size="small" :href="`https://detail.tmall.com/item.htm?id=${record.item_id}`"
                target="_blank"
            >
              PC
            </a-button>
          </a-col>
        </a-row>
      </template>
    </template>
  </a-table>
</template>

<style scoped>

</style>
